<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>blockOne</title>
</head>
<style>
  div{
    width: 300px;
    height: 300px;
    display: block; /*转换为块级元素*/
    display: inline-block; /*转换为行内块元素*/

    background:pink url(1.jpg) no-repeat center center;
  }
  p{
    width: 300px;
    height: 300px;
    background:pink ;
    display: inline-block; /*转换为行内块*/
  }

  h1 {
    width: 300px;
    height: 300px;
    background: pink;
    display: inline; /*转换为行内元素*/


  }

  span {
    width: 300px;
    height: 300px;
    background: pink;
  }
  a {
    width: 300px;
    height: 300px;
    background: pink;
  }
  strong {
    width: 300px;
    height: 300px;
    background: pink;
  }

  b {
    width: 300px;
    height: 300px;
    background: pink;
  }
  em {
    width: 300px;
    height: 300px;
    background: pink;
  }
  del {
    width: 300px;
    height: 300px;
    background: pink;
  }

  u {
    width: 300px;
    height: 300px;
    background: pink;
  }
  i {
    width: 300px;
    height: 300px;
    background: pink;
  }
  s {
    width: 300px;
    height: 300px;
    background: pink;
  }

  div{
    color: green;
  }


b{
  /*行内标签不能直接改变宽度和高度，要转换为行内块或块才可以*/
  display: inline-block;
  background-color: purple;
  width: 50px;
  height: 30px;
}
</style>
<body>

<!--换行标签:div,p,标题标签(h1,h2,...)-->
<div></div>
<p></p>
<h1>hello</h1>
<hr>
<!--行内标签:span,a(超链接),s(删除线),u(下划线),i(斜体),b(加粗),strong(加粗),em(斜体),del(删除)....-->
<span>hello</span>
<a>hello</a>
<b>hello</b>
<strong>hello</strong>
<em>hello</em>
<del>hello</del>
<u>hello</u>
<i>hello</i>
<s>hello</s>
<!--行内块标签:input,textarea,img,button,video,audio-->
<input>
<textarea></textarea> <!--文本域-->
<img>
<button></button>
<video></video>
<audio></audio> <!--音频-->

<!--元素(标签)显示模式:-->
<!--1.display:block(转换为块级元素)-->
<!--2.display:inline-block(转换为行内块元素)-->
<!--3.display:inline(转换为行内元素)-->
<hr>
<a>
  <div>
    hello
  </div>
</a>
<!--嵌套原则:p不能嵌套div,a标签可以嵌套任何标签，但是不能嵌套自己(a标签)-->
<a>
  <div>
    <ol>
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
    </ol>
  </div>
</a>
<hr>
<!--CSS继承性:只能控制文字的属性，如果元素有自己的属性那么就不会继承-->
<div>
  <a href="#">超链接</a>
  <span>span</span>
  <h1>hello</h1>
</div>



<script>

</script>
</body>
</html>
